<template>
  <!-- <div id="app" @mousewheel="handleScroll"> -->
  <div id="app" >

    <one class="base" ></one>
    <two  class="base" ></two>
    <three class="base"></three>
    <!-- <four class="base"></four> -->
    <five class="base"></five>
    <four class="base"></four>
    <!-- <six class="base"> </six> -->
    <!-- <four class="base"></four> -->
    <!-- <four class="base"></four> -->

  </div>
</template>

<script>
import one from "./components/one.vue";
import two from "./components/two.vue";
import three from "./components/three.vue";
import four from "./components/four.vue";
import five from './components/five.vue'
// import six from './components/six.vue'

export default{
  data() {
   return {
   }
  },


  components:{
    one,
    two,
    three,
    four,
    five,
    // six
  },
  mounted(){
    // this.eventScroll()
  }
}

</script>

<style lang="less">
html{
  width: 100vw;
  height: 100%;
  body,h1,h2,h3,h4,h5,h6,p,dl,dd{margin:0;} 
  ul,ol{margin:0;padding:0;} 
  a{color:#000;text-decoration:none;}
  li{list-style:none;} 
  img{border:none;} img{border:none;} 
  body{
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
  }
  #app{
    width: 100vw;
    // overflow: auto;
    // background-color: #9ddbc0;
    background-image: linear-gradient(to left, #4b45f0,#e43c3c,); 
    .base{
      width: 99%;
      height: 785.2px; 
      // background-color: pink;
      margin-bottom: 2px;
      // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
  }
}
</style>
